<template>
  <div class="app-container">
    <el-form
      v-if="showlayout == 2"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
    >
      <el-form-item :label="$t('inspection.inspectionName')" prop="name">
        <el-input
          v-model="queryParams.param.name"
          size="small"
          :placeholder="$t('common.ckeyword')"
          style="width: 240px"
          :clearable="true"
          @change="clearName"
        />
      </el-form-item>

      <el-form-item :label="$t('inspection.inspectionstatus')" prop="enable">
        <el-select
          v-model="queryParams.param.enable"
          :placeholder="$t('operating.pleaseChosen')"
          style="width: 120px"
          size="small"
          :clearable="true"
          @change="clearEnable"
        >
          <el-option
            v-for="item in inspectOpetions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          v-hasPermi="['system:configPolling:findPage']"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >{{ $t("common.csearch") }}</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("common.creset")
        }}</el-button> -->
      </el-form-item>
    </el-form>

    <el-row
      v-if="showlayout == 2"
      :gutter="10"
      class="mb8"
      style="display: flex; align-items: center"
    >
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['security:inspect:add']"
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          @click="addData()"
        >
          {{ $t("common.caddkey") }}
        </el-button>
      </el-col>

      <el-col :span="1.5" v-show="!multiple">
        <el-button
          v-hasPermi="['security:inspect:delete']"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleBitchDelete"
        >{{ $t("common.cdeleteBatch") }}</el-button>
      </el-col>
    </el-row>

    <div class="app-body">
      <div v-show="showlayout == 2">
        <el-table
          :data="inspectList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!--多选框-->
          <el-table-column type="selection" width="50" align="center" />
          <!-- <el-table-column prop="idx" :label="$t('inspection.order')" width="100" /> -->
          <el-table-column
            prop="pollingName"
            :label="$t('inspection.inspectionName')"
          />
          <el-table-column
            prop="pollingFenceNameList"
            :label="$t('inspection.inspectionPointName')"
          />
          <!-- <el-table-column
            prop="pollingResourceNames"
            :label="$t('inspection.peopleData')"
          /> -->
          <el-table-column
            :label="$t('inspection.pollingPerDept')"
            min-width="200"
          >
            <template slot-scope="scope">
              <span
                :style="{
                  color: scope.row.pollingResourceNames ? '#3286e8' : '#7db981',
                }"
              >
                {{
                  scope.row.pollingResourceNames
                    ? scope.row.pollingResourceNames
                    : scope.row.departmentNames
                }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            prop="pollingTime"
            :formatter="rePollingTime"
            :label="$t('inspection.inspectionTime')"
          />
          <el-table-column
            prop="cycle"
            :formatter="pollingCycle"
            :label="$t('inspection.inspectionCircle')"
          />
          <el-table-column
            width="80"
            prop="pollingDuration"
            :label="$t('inspection.inspectionResidenceTime')"
          />
          <el-table-column
            key="status"
            :label="$t('timetask.jobstatus')"
            align="center"
          >
            <template slot-scope="scope">
              {{
                scope.row.enable == "1"
                  ? $t("common.cenable")
                  : $t("common.cdisable")
              }}
              <el-switch
                v-model="scope.row.enable"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column>
          <!--操作-->
          <el-table-column :label="$t('operating.operating')">
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['security:inspect:edit']"
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="handleEditFather(scope.$index, scope.row)"
              >{{ $t("operating.handle") }}</el-button>
              <el-button
                v-hasPermi="['security:inspect:delete']"
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              >{{ $t("operating.delete") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </div>

      <div v-show="showlayout == 1" style="height: 100%">
        <add-inspection ref="mychild" @changeShow="modifyShow($event)" />
      </div>
    </div>


  </div>
</template>

<script>
import { inspectionList, deletePolling, pollingEnable } from '@/api/cy.js'
import addInspection from './inspectadd'
export default {
  components: {
    'add-inspection': addInspection
  },
  data() {
    return {
      inspectOpetions: [
        // { label: '所有', value: 'all' },
        { label: this.$i18n.t('common.cenable'), value: '1' },
        { label: this.$i18n.t('common.cdisable'), value: '0' }
      ],
      single: false,
      multiple: true, // 多选删除
      selectIdx: [],
      showlayout: '2', // 切换显示的页面
      total: 0, // 总页数
      inspectList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        param: {
          name: undefined,
          enable: undefined
        }
        // columnFilters: { fenceType: { name: 'fenceType', value: 'polling' }}
      },
      weeks: this.$t('alarm.cycle')
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    clearEnable(e) {
      if (!e) {
        delete this.queryParams.param.enable
      }
    },
    clearName(e) {
      if (!e) {
        delete this.queryParams.param.name
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getData()
    },

    /** 重置搜索操作 */
    resetQuery() {
      this.queryParams.param.name = undefined
      this.queryParams.param.enable = undefined
      this.resetForm('queryForm')
      this.handleQuery()
    },

    // 用户状态修改
    handleStatusChange(row) {
      this.$confirm(
        this.$i18n.t('common.cstatus'),
        this.$i18n.t('common.cwarn'),
        {
          confirmButtonText: this.$i18n.t('common.cok'),
          cancelButtonText: this.$i18n.t('common.ccancel'),
          type: 'warning'
        }
      )
        .then(() => {
          return pollingEnable({ idx: row.idx, enable: row.enable })
          // return addPolling(row)
        })
        .then((res) => {
          console.log(res)
          this.msgSuccess(res.msg)
        })
        .catch(() => {
          row.enable = row.enable === '0' ? '1' : '0'
        })
    },

    // 获取考勤任务列表
    getData() {
      inspectionList(this.queryParams).then((res) => {
        if (res.code === 200) {
          if (res.rows.length === 0 && res.total > 0) {
            this.queryParams.pageNum = 1
            this.getData()
            return
          }
          this.total = res.total
          res.rows.map((item) => {
            item.enable = item.enable.toString()
          })
          this.inspectList = res.rows
        } else {
          this.msgSuccess(res.msg)
        }
      })
    },

    addData() {
      this.$refs.mychild.clearInsForm()
      this.showlayout = 1
      this.$refs.mychild.pollingIdx = null
    },
    // 修改巡检信息
    handleEditFather(index, row) {
      this.$refs.mychild.handleEdit(index, row)
      this.showlayout = 1
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectIdx = selection.map((item) => {
        return { idx: item.idx }
      })
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /**
     * 批量删除
     */
    handleBitchDelete() {
      this.deleteRow(this.$i18n.t('common.cdelTip'), this.selectIdx)
    },

    // 确定删除
    handleDelete(index, row) {
      this.selectIndex = index
      this.deleteRow(this.$i18n.t('common.cdelTipItem') + row.pollingName, [
        { idx: row.idx }
      ])
    },
    deleteRow(delTip, delData) {
      this.$confirm(delTip, this.$i18n.t('common.cwarn'), {
        confirmButtonText: this.$i18n.t('common.cok'),
        cancelButtonText: this.$i18n.t('common.ccancel'),
        type: 'warning'
      })
        .then(() => {
          return deletePolling(delData)
        })
        .then((response) => {
          this.msgSuccess(response.msg)
          setTimeout(() => {
            this.getData()
          }, 1500)
        })
    },
    // 巡检时间格式
    rePollingTime(row, column) {
      return row.timeStart + '-' + row.timeEnd
    },
    // 巡检周期格式
    pollingCycle(row, column) {
      const stringWeek = []
      if (row.cycle) {
        const cycleArr = row.cycle.split(',')
        for (let j = 0; j < cycleArr.length; j++) {
          if (cycleArr[j] == 1) {
            stringWeek.push(this.weeks[j])
          }
        }
        if (stringWeek.length > 0) {
          return stringWeek.join(',')
        } else {
          return this.$i18n.t('common.cnone')
        }
      }
    },
    modifyShow($event) {
      if ($event) {
        this.showlayout = 2
        this.getData()
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-table .cell {
  white-space: nowrap !important;
}
</style>
